<template>
    <page-wrapper>
        <table-search @search="search(1)" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-tree-select
                        v-model="form.deptId"
                        allowClear
                        style="width:240px"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :tree-data="deptList"
                        :replaceFields="{
                            children: 'children',
                            title: 'deptName',
                            key: 'deptId',
                            value: 'deptId'
                        }"
                        placeholder="请选择项目部"
                    >
                    </a-tree-select>
                </form-item>
                <form-item label="">
                    <a-select v-model="form.objectType" style="width:160px;" allowClear placeholder="请选择工种">
                        <a-select-option :value="item.value" v-for="item in staffTypes" :key="item.value">{{
                            item.label
                        }}</a-select-option>
                    </a-select>
                </form-item>
            </template>
            <template slot="extra">
                <a-dropdown class="btn_dropdown">
                    <a-menu slot="overlay" @click="handleFormType">
                        <a-menu-item key="1">保险增减统计</a-menu-item>
                        <a-menu-item key="2">投保实时总表</a-menu-item>
                    </a-menu>
                    <a-button style="margin-left: 8px"> {{formType==1?'保险增减统计':'投保实时总表'}} <a-icon type="down" /> </a-button>
                </a-dropdown>
                <a-button
                    class="btn_space filter-item"
                    type="primary"
                    icon="download"
                    @click="download()"
                    >导出</a-button
                >
                <a-button
                    class="form_btn btn_space btn_reset"
                    icon="setting"
                    @click="goSetting()"
                    >保险公司设置</a-button
                >
            </template>
        </table-search>
        <div class="show_table flex-row" v-if="formType==1">
            <div class="table_item flex-item">
                <h2 class="head add">新增</h2>
                <table-list
                    :loading="loading"
                    :columns="columns"
                    rowKey="idNumber"
                    :pagination="false"
                    :data="list"
                    :scroll="{x:800}"
                >
                    <template slot="index" slot-scope="{ index }">
                        <span>{{ (form.page - 1) * form.size + index + 1 }}</span>
                    </template>
                    <template slot="idNumber" slot-scope="{ text }">
                        {{ dealIdCard(text.idNumber) }}
                    </template>
                    <template slot="objectType" slot-scope="{ text }">
                        <field-tag :data="staffTypes" :value="text.objectType" type="value" showType="label"></field-tag>
                    </template>
                </table-list>
            </div>
            <div class="table_item flex-item">
                <h2 class="head reduce">减少</h2>
                <table-list
                    :loading="loading"
                    :columns="columns"
                    rowKey="idNumber"
                    :pagination="false"
                    :data="list"
                    :scroll="{x:800}"
                >
                    <template slot="index" slot-scope="{ index }">
                        <span>{{ (form.page - 1) * form.size + index + 1 }}</span>
                    </template>
                    <template slot="idNumber" slot-scope="{ text }">
                        {{ dealIdCard(text.idNumber) }}
                    </template>
                    <template slot="objectType" slot-scope="{ text }">
                        <field-tag :data="staffTypes" :value="text.objectType" type="value" showType="label"></field-tag>
                    </template>
                </table-list>
            </div>
        </div>
        <div class="table_scroll table_item flex-item" v-else>
            <h2 class="head add">新增</h2>
            <table-list
                :loading="loading"
                :columns="totalColumns"
                rowKey="idNumber"
                :pagination="pagination"
                :data="list"
            >
                <template slot="index" slot-scope="{ index }">
                    <span>{{ (form.page - 1) * form.size + index + 1 }}</span>
                </template>
                <template slot="idNumber" slot-scope="{ text }">
                    {{ dealIdCard(text.idNumber) }}
                </template>
                <template slot="objectType" slot-scope="{ text }">
                    <field-tag :data="staffTypes" :value="text.objectType" type="value" showType="label"></field-tag>
                </template>
            </table-list>
        </div>
    </page-wrapper>
</template>
<script>
import table from '@/mixins/table';
import { columns ,totalColumns} from './columns';
import deptApi from '@/api/system/dept';
import { idCard } from '@/utils';
import { staffTypes } from '@/views/staff/dictionary';
import { getCache } from '@/utils/session';
import { downloadFile } from '@/utils';
import {
    remoteList,
    remoteTotalList,
    downloadDayInfo,
    downloadTotalInfo
} from '@/api/staff/insure';
const moment = require('moment');

export default{
    name:'Insure',
    mixins: [table],
    data(){
        let originForm = {
            deptId:undefined,
            objectType: undefined,
        };
        return{
            columns,
            totalColumns,
            originForm,
            staffTypes,
            form:{
                ...originForm
            },
            formType:1,
            deptList: [],
            expandDeptData:[],
            reduceList:[],
        }
    },
    created(){
        this.getResource();
        this.search();
    },
    watch:{
        formType:function(value){
            this.search();
        }
    },
    methods:{
        //导出
        async download(){
            this.loading = true;
            try {
                let res = null;
                let fileName = '';
                let today = moment(new Date()).format('YYYY-MM-DD');
                if(this.formType==1){
                    res = await downloadDayInfo(this.form);
                    fileName = `保险增减每日统计-${today}`;
                }else{
                    res = await downloadTotalInfo(this.form);
                    fileName = `导出投保实时总表-${today}`;
                }
                downloadFile(res, fileName, 'xlsx');
            } finally {
                this.loading = false;
            }
        },
        //获取列表数据
        async search(page) {
            try {
                this.loading = true;
                if (page) {
                    this.form.page = page;
                }
                this.list = [];
                if(this.formType==1){
                    let res = await remoteList(this.form);
                    let { addItems, subItems } = res.data;
                    this.list = addItems;
                    this.reduceList = subItems;
                }else{
                    let res = await remoteTotalList(this.form);
                    let { data, total } = res.data;
                    this.list = data;
                    this.total = total;
                }
            } finally {
                this.loading = false;
            }
        },
        //切换类型
        handleFormType(e){
            let {key} = e;
            this.formType = key;
        },
        dealIdCard(number) {
            return idCard(number);
        },
        //获取资源列表信息
        async getResource() {
            let userInfo = getCache('userInfo') || { userId: '' };
            let { userId } = userInfo;
            let deptResult = await deptApi.remoteList({ userId });
            this.deptList = [
                {
                    deptName: '全部',
                    deptId: ''
                },
                ...deptResult.data
            ];
            // this.deptList = deptResult.data;
            this.expandDeptData = [];
            this.expandData(deptResult.data);
        },
        //多层次数据展开
        expandData(data) {
            if (Array.isArray(data)) {
                data.map(item => {
                    this.expandDeptData.push(item);
                    if (item.children && item.children.length) {
                        this.expandData(item.children);
                    }
                });
            }
        },
        //跳转设置
        goSetting(){
            this.$router.push({
                path:'/setting/config/index',
                query:{type:4}
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.show_table{
    flex: 1;
}
.table_item{
    flex: 1;
    width: 0;
    flex-wrap: nowrap;
    .head{
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        color: #333;
        &.add{
            background-color: #A0E5D7;
        }
        &.reduce{
            background-color: #F9BABA;
        }
    }
}
</style>